<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>监听所有的变量</title>
</head>
<body>
<div id="app">
    <h1>当前点击的次数</h1>
    <h2>{{ count }}</h2>
    <button @click="countChange">点击计数</button>

    <hr>

    <h1>姓名：{{ person.name }}</h1>
    <h1>年龄：{{ person.age }}</h1>
    <h1>性别：{{ person.gender }}</h1>

    <button v-on:click="changeName">修改姓名</button>
    <button v-on:click="person.age +=1">修改年龄</button>
    <button v-on:click="changeGender">修改性别</button>
    <button v-on:click="addScore">添加成绩</button>

</div>
<script type="module">
    import {createApp, ref, reactive, watchEffect} from "../../../../../js/vue.esm-browser.js";

    const app = createApp({
        setup() {
            let count = ref(0)

            let person = reactive({
                name: "abcque",
                age: 18,
                gender: "M",
            })

            function countChange() {
                count.value += 1
            }


            function changeName() {
                person.name += "~"
            }

            function changeGender() {
                if (person.gender === 'M')
                    person.gender = 'W'
                else
                    person.gender = 'M'
            }

            function addScore() {
                person.score = {
                    math: 98,
                    chinese: 90,
                    c: 100,
                }
            }


            watchEffect(
                function () {
                    console.log("调用了 watchEffect 回调函数");
                    // let c = count
                    let c = count.value
                    // console.log("当前计数值：" + count.value);

                    // let p = person
                    // let v = person.value

                    // let {name, age, gender} = person
                    // let name = person.name
                    let name = person.name.value
                }
            )
            return {
                count,
                countChange,
                person,
                changeName,
                changeGender,
                addScore,
            }
        }
    })

    app.mount("#app")
</script>
</body>
</html>